<template>
  <div class="profile-wrapper">
    <el-row :gutter="15" style="height: 100%">
      <el-col :lg="6" class="hidden-md-and-down">
        <el-card class="menu" :body-style="{padding: '10px 0'}">
          <template #header>
            <div class="header">
              <el-icon class="icon"><setting /></el-icon>
              <div>信息设置</div>
            </div>
          </template>
          <div
            class="menu-item"
            :class="{active: activeTab === 'basic'}"
            @click="changeTab('basic')"
          >
            <div class="title">基本信息</div>
            <div class="info">个人账户信息设置</div>
          </div>
          <div
            class="menu-item"
            :class="{active: activeTab === 'security'}"
            @click="changeTab('security')"
          >
            <div class="title">安全设置</div>
            <div class="info">密码设置等</div>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="18" style="height: 100%">
        <el-card style="height: 100%" :body-style="{height: '100%'}">
          <el-tabs ref="$tab" v-model="activeTab" class="profile-tab">
            <el-tab-pane name="basic" label="基本设置"><BasicInfo /></el-tab-pane>
            <el-tab-pane name="security" label="安全设置"><Security /></el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

<!--    <el-row :gutter="20">-->
<!--      <el-col :span="12"><div class="grid-content bg-purple">12212</div></el-col>-->
<!--      <el-col :span="12"><div class="grid-content bg-purple-light"></div>3423432</el-col>-->
<!--      <el-col :sm="1" :lg="6">-->
<!--        <el-card></el-card>-->
<!--      </el-col>-->
<!--      <el-col :lg="12">-->
<!--        <el-card class="box-card">-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
  </div>
</template>

<script>
export default {
  name: "Profile"
}
</script>

<script setup>
import {ref, onMounted, computed} from 'vue'
import BasicInfo from './components/BasicInfo'
import Security from './components/Security'

let activeTab = ref('basic')
const changeTab = (tabName) => {
  activeTab.value = tabName
}

const $tab = ref(null)
const $tabNav = computed(() => $tab.value.$el.firstChild)
onMounted(() => {
  $tabNav.value.classList.add("hidden-lg-and-up")
})

</script>

<style scoped lang="sass">
.profile-wrapper
  width: 100%
  height: 100%

  .menu
    .header
      display: flex
      align-items: center
      .icon
        margin-right: 5px
    .menu-item
      transition: all 0.5s
      cursor: pointer
      padding: 10px 20px
      &:hover
        background-color: #f3f3f3
      .title
        font-size: 14px
        color: #515a6e
      .info
        font-size: 12px
        color: #9086b0
        margin-top: 7px
    .active
      .title, .info
        color: #2d8cf0 !important
      background-color: #f0faff



  //.profile-tab
  //  width: 100%
  //  height: 100%
  //
  //  .label
  //    height: 200px
  //    background-color: #67c23a
  //    width: 100px

</style>
